<template>
    <div class="orderaccount">
        <!-- -----------------订单结算页面-------------- -->
        <div class="back-nav-box">
            <back-nav title="订单结算" left-text="返回"  left-arrow  @navback="navback"></back-nav>
        </div>
        <!-- 地址选择 -->
        <div class="choseBox">
            
            <div class="chose-address"><van-cell is-link @click="showPopup">选择地址</van-cell></div>
            <div class="Us-msg"><span>{{defaultAddress.name}}</span><span>{{defaultAddress.tel}}</span><span class="default-btn" v-if="defaultAddress.isDefault==1">默认</span></div>
            <div class="Us-address">{{defaultAddress.addressDetail}}</div>
        </div>
        <!-- 订单信息 -->
        <div class="account-msgBox">
            <div class="account-title">订单信息</div>
            <ul>
                <li class="account-li" v-for="(item,index) in allAccount" :key="index">
                    <div class="account-img"><img :src="item.small_img" alt=""></div>
                    <div class="account-msg">
                        <div class="zh-name">
                            <span>{{item.name}}</span>
                            <span>{{item.rule}}</span>
                        </div>
                        <div class="en-name">{{item.enname}}</div>
                        <div class="account-price">&yen;{{item.price}}</div>
                        <div class="account-count">X{{item.count}}</div>
                    </div>
                </li>
            </ul>
            <!-- 向内凹陷的两个圆角 -->
            <div class="cro_left_bottom cro"></div>
            <div class="cro_right_bottom cro"></div>
        </div>

        <!-- 订单时间 总价 -->
        <div class="orderTimeTotal">
                 <!-- 向内凹陷的两个圆角 -->
                <div class="cro_left_top cro"></div>
                <div class="cro_right_top cro"></div>
            <div class="order-time">{{gettime}}</div>
            <div class="order-count-total">
                <div class="order-count">{{allcount}}件</div>
                <div class="order-total">&yen;{{allprice}}</div>
            </div>
        </div>
        <!-- 底部弹出层 -->
        <van-popup v-model="isShow" position="bottom" :style="{ height: 'auto' }" round closeable close-icon="close" >
            <div class="popup-title">
                <div>选择地址</div>
               
            </div>
            <van-radio-group v-model="radio">
                <div class="popup-addressBox" v-for="item in allAddress" :key="item.id">
                    <div class="popup-checked"><van-radio :name="item.aid" @click="findAddressByAid(item.aid)"></van-radio></div>                
                    <div class="choseBox popup-address">
                        <div class="Us-msg"><span>{{item.name}}</span><span>{{item.tel}}</span><span class="default-btn" v-if="item.isDefault==1">默认</span></div>
                        <div class="Us-address">{{item.addressDetail}}</div>
                    </div>
                </div>
            </van-radio-group>
        </van-popup>

        <!-- 立即结算按钮 -->
        <div class="topayBtn" @click="Pay"><van-button round type="info">立即结算</van-button></div>
        <!-- 占位 盒子 -->
        <div class="zanwei"></div>
    </div>
</template>

<script>
import BackNav from '../components/BackNav.vue'
    export default {
        data() {
            return {
                defaultAddress:{},//上面 选择地址 
                allAddress:[],//所有地址
                allAccount:[],//所有商品 订单
                isShow:false,
                radio:'',
                sidArr:[],
                 gettime:"",//当前时间
                 allcount:0,//订单里所有商品的数量
                 allprice:0,//订单总价
            }
        },
        components:{BackNav},
        created() {
            this.findAddress();
            this.commitShopcart();
            this.getNowTime();
           
        },
        updated() {
         console.log(this.defaultAddress);
        },
        methods: {
            // 立即结算
            Pay(){
                // 判断是否选择了地址
                if(this.defaultAddress.userId){
                    this.axios.post('/pay',{
                            sids: JSON.stringify(this.sidArr),
                            phone: this.defaultAddress.tel,
                            address: this.defaultAddress.addressDetail,
                            receiver: this.defaultAddress.name
                        }).then(res=>{
                        console.log('我的订单res=>',res);
                        this.$toast(res.data.msg)
                        setTimeout(() => {
                            res.data.orderTime=this.gettime
                            console.log('我的订单res=>',res);
                            this.$router.push({name:'Navall'})
                        }, 1000);
                    }).catch(err=>{
                        console.log('err',err);
                    })
                }else{
                    this.$toast('请先选择收获地址')
                }
            },
            // 根据订单 计算出订单里所有商品数量，和总价
                countAndprice(){
                    this.allAccount.forEach(v=>{
                        this.allcount+=v.count
                        this.allprice+=v.count*v.price
                    })
                        console.log(this.allcount,this.allprice);
                },
             // 获取当前时间
                getNowTime(){
                        var _this = this;
                        let yy = new Date().getFullYear();
                        let mm = new Date().getMonth()+1;
                        let dd = new Date().getDate();
                        let hh = new Date().getHours();
                        let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                        let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                        _this.gettime = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
                        console.log(this.gettime)
                },
            // 提交订单页面查询需要购买商品接口
            commitShopcart(){
                this.sidArr=this.$route.params.sidArr
                console.log(this.sidArr);
                this.axios({
                    method:'get',
                    url:'/commitShopcart',
                    params:{
                        sids:JSON.stringify(this.sidArr)
                    }
                }).then(res=>{
                    console.log('根据aid查询地址 res=>',res);
                    this.allAccount=res.data.result
                    console.log('this.allAccount',this.allAccount);
                    // 调用方法
                     this.countAndprice();
                    // this.isShow=false
                }).catch(err=>{
                    console.log('err',err);
                })
            },
            // 根据aid查询地址 （底部弹出层）
            findAddressByAid(aid){
                this.axios({
                    method:'get',
                    url:'/findAddressByAid',
                    params:{
                        aid
                    }
                }).then(res=>{
                    // console.log('根据aid查询地址 res=>',res);
                    this.defaultAddress=res.data.result[0]
                    this.isShow=false
                }).catch(err=>{
                    console.log('err',err);
                })
            },
            // 显示（选择地址）弹出层
            showPopup(){
                this.isShow=true
            },
            // 返回
            navback(){
                this.$router.go(-1)
            },
            // 查询地址 接口
            findAddress(){
                this.axios({
                    method:'get',
                    url:'/findAddress'
                }).then(res=>{
                    res.data.result.forEach(v=>{
                        v.isChecked=false
                    })
                    this.allAddress=res.data.result
                    // console.log('所有地址res=>',this.allAddress);
                    // 查询有没有默认地址
                    res.data.result.forEach(v=>{
                        if( v.isDefault==1){
                            this.defaultAddress=v
                        }
                    })
                    // console.log('默认地址res=>',this.defaultAddress);
                }).catch(err=>{
                    console.log('err',err);
                })
            }
        },
    }
</script>

<style lang="less" scoped>
// 订单时间 总价
.orderTimeTotal{
    width: 355px;
    height: 80px;
    margin: 0 auto;
    background-color: #fff;
    position: relative;
    padding: 10px;
    box-sizing: border-box;
    border-top:1px #666 dashed;
    .order-time{
        margin-top: 10px;
        font-size: 14px;
        color: #666;
    }
    .order-count-total{
        display: flex;
        margin-top: 10px;
        .order-count{
            font-size: 16px;
            flex: 1;
        }
        .order-total{
            font-size: 16px;
            font-weight: bold;
            color: #0c34ba;
            flex: 1;
            text-align: right;
        }
    }
}
// 向内凹陷两个盒子
.cro{
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid #f7f7f7;
    z-index: 1;
    background: #f7f7f7;
}
.cro_right_bottom{
    right: -1px;
    bottom: -1px;
    border-radius: 10px 0 0 0;
    border-top: 1px solid #f7f7f7;
    border-left: 1px solid #f7f7f7;
}
.cro_left_bottom {
    left: -1px;
    bottom: -1px;
    border-radius: 0 10px 0 0;
    border-top: 1px solid #f7f7f7;
    border-right: 1px solid #f7f7f7;
}
.cro_left_top{
    left: -1px;
    top: -1px;
    border-radius: 0 0 10px 0;
    border-top: 1px solid #f7f7f7;
    border-right: 1px solid #f7f7f7;
}
.cro_right_top{
    right: -1px;
    top: -1px;
    border-radius: 0 0 0 10px;
    border-top: 1px solid #f7f7f7;
    border-left: 1px solid #f7f7f7;
}
.zanwei{
    height: 60px;
}
// 立即结算按钮
.topayBtn{
    width: 355px;
    height: 50px;
    position: fixed;
    bottom: 10px;
    left: 10px;
    .van-button {
        width: 100%;
        background-color: #0c34ba;
    }
}

.popup-addressBox{
    display: flex;
    width: 355px;
    height: 70px;
    border-bottom: 1px solid rgb(175, 173, 173);
    align-items: center;
    margin: 0 auto;
    .popup-checked{
        flex: 1;
        margin: 0 auto;
    }
    .popup-address{
        flex: 11;
        height: 70px !important;
        padding: 0px !important;
        .popup-zhname{
            font-size: 16px;
        }
       
    }
}
.popup-title{
    display: flex;
    font-size: 16px;
    color: #666;
    padding: 10px 10px 0px 10px;
    & div:first-child{
        flex: 1;
    }
   
}
// 修改（选择地址）弹出层样式
/deep/.van-cell {
    padding: 0px;
}
.account-li{
    height: 80px;
    // background-color: antiquewhite;
    display: flex;
    border-bottom: 1px solid #f7f7f7;
    .account-img{
        flex: 1;
        // width: 65px;
        img{
            width: 65px;
            height: 65px;
            margin-top: 8px;
        }
    }
    .account-msg{
        flex: 3;
        position: relative;
        width: 250px;
        .zh-name{
             white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            & span:first-child{
                font-size: 16px;
                color: #666;
                margin-right: 10px;
            }
            & span:last-child{
                font-size: 14px;
                color: #666;
            }
        }
        .en-name{
             white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-size: 14px;
            color: #666;
        }
        .account-price{
            color: #0c34ba;
            font-size: 16px;
            margin-top: 10px;
            font-weight: bold;
        }
        .account-count{
            position: absolute;
            bottom: 10px;
            right: 10px;
            font-size: 14px;
            color: #666;
        }
    }
}
// 订单信息
.account-msgBox{
    width: 355px;
    margin: 0 auto;
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    box-sizing: border-box;
    .account-title{
        font-size: 14px;
        color: #666;
    }
}

.orderaccount{
    min-height: 100vh;
    background-color: #f7f7f7;
}
// 地址选择栏
.choseBox{
    width: 355px;
    height: 100px;
    margin: 10px auto;
    padding: 10px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    // 选择地址
    .chose-address{
        font-size: 14px;
        color: #666;
    }
    // 用户信息
    .Us-msg{
        margin-top: 5px;
        & span:first-child{
            color: #0c34ba;
            font-size: 16px;
            // font-weight: bold;
            margin-right: 10px;
        }
        & span:nth-child(2){
            color: #666;
            font-size: 16px;
             margin-right: 15px;
        }
        .default-btn{
            display: inline-block;
            width: 40px;
            font-size: 16px;
            border-radius: 15px;
            text-align: center;
            color: #fff;
            background-color: #0c34ba;
        }
    }
    // 用户地址
    .Us-address{
        margin-top: 5px;
        color: #666;
        font-size: 14px;
    }
}
</style>